<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>汉心双拼打字高级自定义强化型训练程序</title>
  <style>
    #random-char {
      display: inline-block;
      font-size: 4rem;   
      color: rgb(27, 27, 27);
      font-weight: bold;
    }
    
    * {
      box-sizing: border-box;
    }
    
    body {
      font-family: Arial, sans-serif;
      background: #fff;
    }  
    
    #container {
      width: 600px;
      margin: 0 auto;  
      padding: 20px;
      background: #fff;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }  
    
    h1 {
      text-align: center;
      font-size: 28px;
      margin-bottom: 20px;  
      color: rgb(3, 139, 25);
    }  
    
    label {
      display: block;
      font-size: 18px;
      margin-bottom: 10px;  
      color: #666;
    }
    
    #source {
      width: 100%;
      height: 200px;
    }   
    
    #typing {
      width: 100%;
      font-size: 24px;
      padding: 8px;
      border: 1px solid #ccc;
    }
    
    #start,
    #submit {
      padding: 8px 12px;
      background: rgb(4, 139, 60);
      color: #fff;
      border: none;
    }  
    
    #start:hover,
    #submit:hover {
      background: rgb(7, 155, 19);
      cursor: pointer;
    }
    .mydiv {

  white-space: pre;  /* 空白会被浏览器保留,文本会按照原格式换行 */
}
  </style>
</head>
<body>
  <div id="container">
    <h1>双拼强化训练-汉心快打</h1>
    <div id="source-text">
      <label>源文字-你要强化的文字-如果你点击过开始训练，就需要刷新后在录入你自己的文字，你可以把你分不清的字都整理出来，进行强化训练，</label>    
      <textarea id="source">下方复制需要训练的字集，或者自己录入进来，点击开始训练即可使用。建议不断把你不熟音节和不熟的字不断的提出来进行加强训练</textarea>
      <button id="submit">开始训练</button> 
    </div>
    <div id="typing-area">
           <div id="random-char2"></div>  <label id="random-char"></label>  
      <input type="text" id="typing">   
    </div>


  </div>
  <div class="mydiv" style="text-align: center;">

    <a href="https://hanxinma.gitee.io/" target="_blank"> <button id="submitt">本工具由易学码 汉心码提供支持-去首页</button> </a>

  按回车键确认输入--如果按回车不动了，或者没字了，就重新点提交
  需要刷新页面后才可以复制过去

2简字-汉心15版-400个全部双拼对应的字强化训练字集-这里也是训练记住默认2简字的字集

啊 爱 按 奥 不 把 被 本 边 白 别 比 并 表 办 帮 报 波 宾 蹦 从 才 次 错 存 草 层 藏 餐 测 擦 粗 凑 催 窜 岑 的 到 大 地 都 对 多 点 但 当 动 定 等 带 度 掉 段 顿 
丢 跌 得 扽 而 恩 额 诶 发 分 风 放 反 非 佛 否 副 个 过 给 高 光 更 关 刚 跟 工 干 怪 够 改 贵 挂 滚 估 嘎 好 会 还 后 和 很 话 活 黑 红 哈 黄 换 坏 混 横 含 互 
行 出 成 长 吃 车 传 产 差 春 充 超 抽 创 吹 尘 拆 揣 戳 就 经 间 进 将 觉 叫 接 加 即 卷 据 均 囧 看 开 口 快 空 克 况 肯 靠 卡 抗 困 宽 亏 酷 夸 扩 坑 剋 了 来
里 老 龙 连 林 路 量 拉 冷 落 论 乱 楼 六 另 类 浪 略 聊 绿 列 栏 们 么 没 面 吗 名 民 忙 慢 梦 木 米 买 毛 某 灭 末 秒 谬 你 那 能 年 女 呢 难 内 娘 您 怒 弄 宁
牛 闹 鸟 乃 暖 捏 嫩 囊 挪 虐 欧 哦 怕 片 跑 破 旁 皮 排 普 配 碰 判 拼 票 瓶 盆 撇 剖 去 前 其 却 全 亲 强 且 请 求 群 穷 桥 恰 人 然 如 让 日 容 若 热 仍 肉 
软 绕 锐 润 所 三 色 四 算 送 岁 孙 赛 束 森 扫 撒 桑 搜 僧 他 天 头 同 听 太 特 提 条 团 谈 推 图 套 托 疼 贴 吞 汤 是 说 上 手 生 身 少 谁 双 数 顺 设 帅 啥 
刷 晒 删 拴 谁 这 中 只 真 正 主 张 找 转 周 准 装 追 抓 桌 占 扎 宅 拽 我 为 无 问 外 万 挖 翁 往 下 小 想 行 学 先 新 修 兄 写 需 选 寻 洗 一 有 也 要 样 用
因 与 应 月 云 元 呀 严 哟 在 子 走 最 怎 做 总 早 则 组 杂 尊 增 赞 贼 钻 脏
  
自然-小鹤-互转差异化的，强化训练对应的字
下掐赢请名晕轮两想强老套好来开快写切列小桥楼有走民亲新



2简字-汉心15版-模糊音字-分不清平翘舌和前后鼻音强化训练

测宾从从才次错存草层藏餐测擦粗凑催窜岑分风放反非佛否副
行出成长吃车传产差春充超抽创吹尘拆揣戳
经间进肯林冷聊名民谬娘您
宁牛闹鸟乃暖捏嫩囊挪虐前请
所三色四算送岁孙赛束森扫撒桑搜僧
说上手生身少谁双数顺设帅啥刷晒删拴谁
这中只真正主张找转周准装追抓桌占扎宅
拽新顺增尊组杂则早最怎做总走在子


  
  </div>   
  

<script>
// 获取DOM元素  
const sourceText = document.querySelector('#source');
const submitButton = document.querySelector('#submit');  
const randomChar = document.querySelector('#random-char');  
const typingText = document.querySelector('#typing');
const nextRandomChar = document.querySelector('#random-char2');

let sourceList = [];  // 源文字列表
let randomList = [];  // 随机文字列表

submitButton.addEventListener('click', () => {
  sourceList = sourceText.value.split('').filter(char => isChineseChar(char));
  loop();
});

function loop() {
  if (sourceList.length === 0) {
    alert('源文字列表为空，请重新输入！');
    return;
  }
  
  randomList = generateRandomList(sourceList);
  
  if (randomList.length > 0) {
    showRandomChar(randomList[0]);
    showNextRandomChar();
  }
}

function generateRandomList(list) {
  const randomList = [...list];
  randomList.sort(() => Math.random() - 0.5);
  return randomList;
}

function showRandomChar(text) {
  randomChar.innerText = text;     
}  

function showNextRandomChar() {
  if (randomList.length > 1) {
    nextRandomChar.innerText = randomList[1];
  } else {
    nextRandomChar.innerText = '';
  }
}

typingText.addEventListener('input', () => {
  const inputVal = typingText.value.trim();
  const randomVal = randomChar.innerText;
  
  if (inputVal === randomVal) {
    typingText.value = '';
    
    // 从随机列表中删除已经输入的字符
    randomList.shift();
    
    if (randomList.length > 0) {
      showRandomChar(randomList[0]);
      showNextRandomChar();
    } else {
      randomList = generateRandomList(sourceList); // 重新生成随机列表
      showRandomChar(randomList[0]);
      showNextRandomChar();
    }
  }
});

function isChineseChar(char) {
  const reg = /^[\u4e00-\u9fa5]+$/;
  return reg.test(char);
}
</script>

</body>
</html>